情境

Flexbox 是 CSS3 的盒子模型(box model)，顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box)，這個模型讓排版變得容易許多。

由於行動裝置的普及導致響應式布局的興起，加上 CSS3 的規範終於普及，自適應長寬彈性相當大的 Flexbox 就越來越受到大家的關注。

你能看見多遠的未來呢？

假設今天我們需要處理一個這樣的結構：

<div class="container">
  <div class="icon__salad"></div>
  <div class="icon__pasta"></div>
  <div class="icon__takoyaki"></div>
</div>

我們為了將菜單上的這些圖示(icon)水平排列，那我們用 Flexbox 該怎麼做呢？沒錯，那就是直接將 display: flex; 添加到外容器上，這樣內元件就能夠以水平方向來做排列了，這個是我們非常常見的一個用法：

.container {
  display: flex;
}

到目前為止都還沒有什麼問題，不過如果今天這家餐廳的老闆希望你幫他擴充菜單呢？他希望多兩個類別的品項，也就是在菜單上多加兩個圖示：

<div class="container">
  <div class="icon__salad"></div>
  <div class="icon__pasta"></div>
  <div class="icon__takoyaki"></div>
  <div class="icon__french-fries"></div>
  <div class="icon__shaved-ice"></div>
</div>

但事實上，我們的畫面有可能會跟我們想像有所落差：

如果我們的外容器是固定寬度，或是有一個最大寬度限制，內元件會溢出外容器的狀況就會發生。
會發生這種狀況的原因，是因為 Flexbox 有一個決定顯示單行或多行的屬性，叫做 flex-wrap，當沒有設置時，他的預設初始值是 nowrap，意思就是「不換行」。

因為我們舉例的情境比較單純，為了方便演示情境，我們是手動加上兩個圖示，所以在開發階段就會很容易發現這個狀況而修正。那實務上我們在什麼時候會忽略內元件溢出的問題呢？

忽略畫面會在不同尺寸裝置上出現的時候

有時候公司狀況不允許的時候，設計師只會給你電腦版的設計圖，假設是寬度 1200px，他沒有辦法每個尺寸都畫給你，而且他也認為畫面非常單純，就算在窄螢幕上面呈現，整體排版不會改變太多，所以你拿著這種設計圖就要下去通靈了。當然我們設計師在處理畫面的時候，他一定會把畫面做得美美的，他不會想到說會需要用一些極端狀況去挑戰他美美的排版。

我們在測試驗收的時候如果也只有在美美的大螢幕上面測試，問題還是不會浮現。但當網頁被使用者用手機開啟時，因為視窗變窄，我們的外容器勢必也會跟著畫面做縮小(當然如果你的外容器沒有彈性，也破版超出視窗之外了，那又是另一個故事了...)，此時因為外容器縮小而導致內元件溢出，這樣的狀況就會發生。

忽略內元件的「數量」會隨著使用者操作而改變

上面的範例我們換個形式來看看，內元件的數量變多的時候，外容器會容納不下而造成溢出。例如設計稿演示的狀況是一個外容器裡面裝 3 個內元件，然後我們在開發的時候也都只測試 3 個以內的畫面是完美的。結果產品交到使用手上的時候，突然他就來跟你抱怨畫面破版了，發現原因是他在裡面塞了 30 個內元件。

忽略內元件的「長度」會隨著使用者操作而改變

除了內元件的數量太多可能會溢出外容器之外，內元件本身的長度你有沒有想過也有可能太長呢？以下圖為例，我們預設每個標籤選項都是兩三個字，不過一旦你讓使用者來客製化標籤，那很可能他會腦洞大開來新增一個超級無敵長的標籤。

[經驗分享]
佈局意外發生的時候，常常是在我們將產品交給使用者操作，然後他做出了我們預期以外的行為的時候。因為交給產品開發者來使用時，我們因為怕產品壞掉所以絕對會乖乖按照規格來小心的使用，但如果交給使用者，我想他的心態應該是會想要挑戰你的產品有多耐用。

如果家裡有小孩子的話，大家應該會有所感觸。例如我們為小孩準備好了一支湯匙，是用摔到地上不會碎的材質，也考慮到吃的時候不會吃到太多有毒物質的材質，也考慮他吃飯的時候符不符合他人體工學等等之類的。各種設想完之後，我們想說這樣就能放心讓孩子吃飯吧！結果你把湯匙交給他之後，發現他拿著這把湯匙去你心愛的魚缸裡面狂打擾你心愛的魚，並且對你抱怨用這把湯匙撈魚很難撈到，很不好用。

就像這樣，我們把產品交給使用者之後，很難期待他絕對會乖乖的按照你所期待的使用方式去使用。所以，在設計產品時，養成習慣站在使用者的立場，設想一些極端的狀況可以幫助我們提早避開問題。

使用換行來解決外容器空間不足

使用 Flexbox 在一般的經驗當中，我們可以設置換行來避免佈局的內元件溢出：

.container {
  display: flex;
  flex-wrap: wrap;
}

使用滾動捲軸來解決外容器空間不足

還有另外一個方式是使用滾動捲軸來延伸外容器的空間：

.container {
  display: flex;
  overflow-x: scroll;
}

小結

今天我們討論了 Flexbox 有可能遇到內元件溢出的幾個狀況：

• 因為瀏覽裝置尺寸不同而有可能產生溢出
• 因為內元件數量比預期的多而產生溢出
• 因為內元件長度比預期的長而產生溢出

我們只要可以多考慮到這幾個狀況，就能夠避免 Flexbox 佈局上的意外。
當然，除了探討問題發生的可能原因之外，我們也提供了幾個常見的應對方式：

• 設置 flex-wrap 換行
• 使用滾動捲軸來解決外容器空間不足

我相信解決方式絕對不只上面這幾種，不過希望今天的討論，能夠讓大家享受到 Flexbox 的方便之餘，也能夠多考慮到可能發生意外的情境，在意外發生前能夠避免。